<template>
	<view>
		<uni-nav-bar fixed="true" backgroundColor="#f5f5f5" title="评论回复" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<view @click="isComment = true">
			<comment :comment="comment" :floor="floor" :uid="comment.uid" :getUser="getUser" :showReply="false"
				@clickUser="watchUser(comment.uid)"></comment>
		</view>
		<view style="display: flex;align-items: center;">
			<view class="comment-title">
				全部回复
			</view>
			<view class="refresh" @click="refresh">
				<uni-icons type="refreshempty" size="25"></uni-icons>刷新
			</view>
		</view>
		<view class="comment-list" v-for="(comment,index) in list" :key="index">
			<comment :comment="comment" :showReply="false" :uid="comment.uid" :getUser="getUser"
				@clickUser="watchUser(comment.uid)">
			</comment>
		</view>
		<view class="more">
			<text v-if="!more">到底了~~~</text>
		</view>
		<view class="footer">
			<view class="click" @click="isComment = true">
				我有话要说...
			</view>
			<u-icon name="chat" size="60" @click="reply" customStyle="margin-left:20px">
			</u-icon>
			<!-- <view class="btn">
				<u-icon name="chat" size="60" @click="slideToComment" :label="0" customStyle="margin-left:20px">
				</u-icon>
				<u-icon name="thumb-up" size="60" @click="like" :label="0" customStyle="margin-left:20px">
				</u-icon>
				<u-icon name="star" size="60" @click="collect" :label="0" customStyle="margin-left:20px"></u-icon>
			</view> -->
		</view>
		<hqs-popup :title="'回复 @'+this.floor+'楼'" :value="isComment" @close="isComment = false">
			<view class="popup">
				<u-textarea class="input" height="120" v-model="cmt" @blur="storeCursor" :cursor="resStart" count
					placeholder="我有话要说..."></u-textarea>
				<view class="bar">
					<uni-icons class="icon" customPrefix="iconfont" type="icon-smile" color="#80858B" size="40">
					</uni-icons>
					<view :class="{'btn':true,'disable':cmt.length==0,'able':cmt.length>0}" @click="reply">
						发送
					</view>
				</view>
				<view class="emotion">
					<swiper :indicator-dots="true" class="swiper">
						<swiper-item v-for="(parentItem, parentIndex) in emoList" :key="parentIndex">
							<view class="swiper-item">
								<image v-for="item in parentItem" :src="item.value | imgSrc" :key="item.value"
									class="image" @click="clickEmoji(item)" mode="aspectFit"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</hqs-popup>
	</view>
</template>

<script>
	import util from "@/config/util.js"
	import pop from "@/components/hqs-popup/hqs-popup.vue"
	import comment from "@/components/comment.vue"
	export default {
		components: {
			pop,
			comment
		},
		data() {
			return {
				comment: null,
				floor: "",
				list: [],
				isComment: false,
				cmt: "",
				//表情列表
				emoList: util.emoList,
				resStart: 0, //input光标位置
				more: true,
			}
		},
		filters: {
			imgSrc(value) {
				return `../../static/emoji/d_${value}.gif`
			}
		},
		methods: {
			watchUser(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			reply() {
				let ccomment = {
					cid: this.comment.cid,
					uid: this.$store.state.user.uid,
					comment: this.cmt
				}
				this.$request.TokenRequest({
					url: "/post/CommentComment"
				}, ccomment).then(res => {
					if (res.state === 200) {
						this.isComment = false
						this.cmt = ""
						this.getComment(this.comment.cid, this.getLatestCcid())
						uni.showToast({
							icon: "success",
							title: "评论成功!"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			//点击表情
			clickEmoji(item) {
				// console.log(item.lable)
				this.cmt = this.cmt.substring(0, this.resStart) +
					item.lable + this.cmt.substring(this.resStart, this.cmt.length)
				this.resStart += item.lable.length
			},
			storeCursor(e) {
				this.resStart = e.target.cursor
				// console.log(this.resStart)
			},
			storeCursor(e) {
				this.resStart = e.target.cursor
				// console.log(this.resStart)
			},
			refresh() {
				this.list = []
				this.more = true
				this.getComment(this.comment.cid, 0)
			},
			getLatestCcid() {
				let l = this.list.length
				if (l === 0) return 0;
				else return this.list[l - 1].ccid
			},
			getComment(cid, startCcid) {
				this.$request.TokenRequest({
					url: "/post/getCCommentByCid"
				}, {
					cid: cid,
					startCcid: startCcid
				}).then(res => {
					if (res.state === 200) {
						if (res.data.length > 0)
							this.list = this.list.concat(res.data)
						if (res.message === "false")
							this.more = false
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			back() {
				uni.navigateBack({})
			},
			getUser(uid) {
				return new Promise((resolve, reject) => {
					this.$request.TokenRequest({
						url: "/user/getUserInfoByUid"
					}, {
						uid: uid
					}).then(res => {
						if (res.state === 200) {
							resolve(res.data)
						}
						reject()
					})
				})
			},
		},
		onLoad(option) {
			this.comment = JSON.parse(option.comment)
			this.floor = parseInt(option.floor)
			this.getComment(this.comment.cid, this.getLatestCcid())
		}
	}
</script>

<style lang="scss" scoped>
	.comment-title {
		font-size: 34rpx;
		font-weight: bold;
		padding: 10rpx 30rpx;
	}

	.refresh {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		position: absolute;
		right: 30rpx;
	}

	.popup {
		.input {
			margin: 10rpx 30rpx;
		}

		/deep/.u-textarea__field {
			font-size: 30rpx;
		}

		.bar {
			display: flex;
			align-items: center;

			.btn {
				position: absolute;
				right: 30rpx;
				padding: 7rpx 20rpx;
				font-size: 30rpx;
				text-align: center;
				border-radius: 10rpx;
			}

			.able {
				background-color: #19A3FE;
				color: #FFFFFF;
			}

			.disable {
				background-color: #F0F1F5;
				color: #A6A6A6;
			}

			.icon {
				margin: 0 30rpx;
			}
		}

		.emotion {
			padding-top: 20%;

			.swiper {
				height: 370rpx;
				text-align: center;
			}

			.image {
				height: 60rpx;
				width: 60rpx;
				padding: 15rpx;
				margin: 10rpx 0;
			}
		}
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0rpx;
		background-color: #F5F5F5;
		width: 100%;
		align-items: center;

		.click {
			width: 70%;
			padding: 15rpx 20rpx;
			margin: 20rpx 3%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			color: #818489;
			font-size: 30rpx;
		}

		.btn {
			width: 54%;
			display: flex;
			align-items: center;
			justify-items: center;
		}


	}

	.more {
		text-align: center;
		padding: 20rpx;
		padding-bottom: 120rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}
</style>
